import { ProColumns } from "@ant-design/pro-components";
import { Button, Image, Popconfirm, Space } from "antd";

export interface propsType {
  id?: string | undefined;
  open: boolean;
  close: (isEdit?: boolean) => void;
}

export const enum productStatustype {
  PUTAWAY = "putaway",
  UN_PUTAWAY = "un_putaway",
}

export interface ProductType {
  id: string;
  name: string;
  desc?: string;
  stock: number;
  sellNum: number;
  limitBuyNum: number;
  cover: string;
  bannerUrl: string;
  originPrice: number;
  preferentialPrice: number;
  orgId: string;
  cards: string;
  status: productStatustype;
  type: string;
}

export const columnsConfig: ProColumns<ProductType>[] = ({
  editClick,
  cardClick,
  delClick,
  putawayClick,
}: {
  editClick: (id: string) => void;
  cardClick: (id: string) => void;
  delClick: (id: string) => void;
  putawayClick: (id: string, status: productStatustype) => void;
}) => [
  {
    dataIndex: "index",
    valueType: "indexBorder",
    width: 48,
  },
  {
    title: "封面",
    dataIndex: "cover",
    search: false,
    align: "center",
    width: 100,
    render: (_, record: ProductType) => <Image src={record.cover} />,
  },
  {
    title: "商品名",
    dataIndex: "name",
    align: "center",
    width: 75,
    formItemProps: {
      rules: [
        {
          required: true,
          message: "请输入查询值",
        },
      ],
    },
  },
  {
    title: "原价",
    dataIndex: "originPrice",
    align: "center",
    search: false,
    width: 75,
  },
  {
    title: "优惠价",
    dataIndex: "preferentialPrice",
    align: "center",
    search: false,
    width: 75,
  },
  {
    title: "库存总额",
    dataIndex: "stock",
    align: "center",
    search: false,
    width: 75,
  },
  {
    title: "每人限购",
    dataIndex: "limitBuyNum",
    align: "center",
    search: false,
    width: 75,
  },
  {
    title: "销量",
    dataIndex: "sellNum",
    align: "center",
    search: false,
    width: 75,
  },
  {
    title: "操作",
    valueType: "option",
    width: 250,
    align: "center",
    render(_text: any, item: { id: any; status: productStatustype }) {
      return (
        <Space>
          {item.status === productStatustype.PUTAWAY ? (
            <Button
              type="default"
              danger
              onClick={() =>
                putawayClick(item.id, productStatustype.UN_PUTAWAY)
              }
            >
              下架
            </Button>
          ) : (
            <Button
              type="default"
              style={{ color: "green", borderColor: "green" }}
              onClick={() => putawayClick(item.id, productStatustype.PUTAWAY)}
            >
              上架
            </Button>
          )}
          <Button type="link" onClick={() => editClick(item.id)}>
            编辑
          </Button>
          <Button type="link" onClick={() => cardClick(item.id)}>
            绑定消费卡
          </Button>
          <Popconfirm
            title="提醒"
            description="确认要删除吗？"
            onConfirm={() => delClick(item.id)}
          >
            <a key="delete">删除</a>
          </Popconfirm>
        </Space>
      );
    },
  },
];
